import { useState } from 'react'
import { Input, Select, Button, Tabs } from 'antd'
import ReactJson from 'react-json-view'

import '../index.less'

const { Option } = Select;
export default function Test(props: any) {

  const { url } = props.location.query;
  const [requestUrl, setRequestUrl] = useState(url);
  const [json, setJson] = useState(null);
  const [loading, setLoading] = useState(false);

  const tabs = [{
    key: "params",
    label: "Params",
  },
  {
    key: "headers",
    label: "Headers",
  },
  {
    key: "body",
    label: "Body",
  }];

  const selectBefore = (
    <Select size="large" defaultValue="get" className="select-before">
      <Option value="get">GET</Option>
      <Option value="post">POST</Option>
      <Option value="put">PUT</Option>
      <Option value="delete">DELETE</Option>
    </Select>
  );

  const send = async () => {
    setLoading(true);
    const res = await window.fetch(requestUrl);
    const json = await res.json();
    setJson(json);
    setLoading(false);
  }

  return (
    <div id="test" style={{ width: "60vw", margin: '0px auto', padding: "40px 0" }}>
      <h1>测试</h1>
      <div style={{ display: 'flex' }}>
        <Input value={requestUrl} onChange={e => { setRequestUrl(e.target.value) }} style={{ flex: 1 }} size="large" addonBefore={selectBefore} defaultValue="" />
        <div style={{ flex: "0 0 100px", marginLeft: 10 }}>
          <Button loading={loading} size="large" type="primary" block onClick={send}>发送</Button>
        </div>
      </div>

      <Tabs style={{ marginTop: 10, marginBottom: 400 }}>
        {tabs.map(tab => (
          <Tabs.TabPane key={tab.key} tabKey={tab.key} tab={tab.label}>

          </Tabs.TabPane>
        ))}
      </Tabs>

      <ReactJson
        theme="monokai"
        src={json ?? {}}
        collapsed={false}
        enableClipboard={false}
        iconStyle="circle"
        displayDataTypes={false}
        style={{ height: 300, overflowY: 'scroll' }}
        name={false}
      />
    </div>
  )
}